<template>
	<div>
		<scroller :on-refresh="refresh" :on-infinite="infinite" :noDataText="noDataText" ref="commonScroller">
			<group id="commonScroller" class="commonScrollerMember">
				<grid class="renewContractDiscoveryCell" v-for="item in items" :show-vertical-dividers="false">
					<grid-item @click.native="jumpTo(item.id)">
						<span class="grid-center-name">{{item.student.substring(0,3)}}</span>
					</grid-item>
					<grid-item>
						<span class="grid-center">{{item.teacher.substring(0,3)}}</span>
					</grid-item>
					<grid-item>
						<span class="grid-center">{{item.lesson}}</span>
					</grid-item>
					<grid-item>
						<span class="grid-center">{{item.points}}</span>
					</grid-item>
					<grid-item>
						<span v-if="item.end_date != null" class="grid-center">{{item.end_date}}</span>
						<span v-else class="grid-center"><span style="background-color: orangered; color:white; font-size: 12px">有效期未填</span></span>
					</grid-item>
				</grid>
			</group>
		</scroller>
	</div>
</template>

<script>
	import Vue from 'vue'
	import NetWorking from '../../../utils/networking'
	import { Group, Grid, GridItem, ConfirmPlugin, Tab, TabItem} from 'vux'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	Vue.use(ConfirmPlugin)

	const SIZE = 20

	export default {
		name: "scrollerMember",
		components: {
			Group,
			Tab,
			TabItem,
			Grid,
			GridItem
		},
    props: {
      curURL: {
        type: String,
        default: ''
      },
      jumpToObjectDetails: {
        type: String,
        default: ''
      },
      delRestURL: {
        type: String,
        default: ''
      },
    },
		data() {
			return {
				noDataText: '',
				offset: 0,
				limit: SIZE,
				noMoreData: false,
				items: [],
				itemName: 'name'
			}
		},
		watch: {
			curURL: function () {
				this.noDataText = ''
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.commonScroller.finishPullToRefresh(false)
				this.$refs.commonScroller.finishInfinite(false)
			}
		},
		methods:{
			refresh (done) {
				this.$refs.commonScroller.finishPullToRefresh(true)
				return
			},
			infinite (done) {
				if(this.noMoreData){
					this.noDataText = '没有更多记录了——总' + this.items.length + '条'
					this.$refs.commonScroller.finishInfinite(true)
					return
				}else{
					let _this = this
					_this.offset += 1
					this.isRunning = true
					NetWorking.doGet(
						this.curURL,
						null ,
						{
							params:{
								offset: _this.offset,
								limit: _this.limit
							}
						}
					).then(
						response => {
							let res = response.data
							if (res.error_code == 0) {
								if(res.page_info.list.length >= 0){
									_this.items.push.apply(_this.items, res.page_info.list)
									_this.bottom += res.page_info.list.length
									//set noMoreData flag to true if current size < limit
									if(res.page_info.list.length < _this.limit){
										_this.noMoreData = true
										_this.$refs.commonScroller.finishInfinite(true);
									}
								}
							} else {
								alert(res.error_message)
							}
							done()
						}
					)
				}
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: this.jumpToObjectDetails, params: { id: id }})
			},
			showDeleteButton(index, item) {
		    if(this.delRestURL == '')
		       return;

				let hasAdminRole = false
				for(var i=0; i < this.$store.state.user.userModel.sysRoleList.length; i++){
					if(this.$store.state.user.userModel.sysRoleList[i].role_name == 'admin'){
						hasAdminRole = true
					}
				}
				if(hasAdminRole == false){
					return
				}

				var _this = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					let thisObj = this
					thisObj.$vux.confirm.show({
						title: '系统提示',
						content: '确认要删除吗?',
						onConfirm () {
							NetWorking.doDelete(
								_this.delRestURL,
								null,
								{
									params: {
										id: item.id
									}
								}
							).then(
								response => {
									let rs = response.data
									if(rs.error_code == 0){
										_this.items.splice(index, 1);
									}else{
										alert(rs.error_message);
									}
								}
							)
						}
					})
				}.bind(this), 1000);
			},
			clearLoop(id) {
				clearInterval(this.Loop);
			}
		}
	}
</script>

<style>
	.commonScrollerMember {
		margin-top: 82px;
	}
	.cellSimple {
		padding: 0px 15px!important;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.commonScrollerMember > .weui-cells > .weui-grids > .weui-grid {
		padding: 10px 0px;
		text-decoration: none;
		font-size: 12px;
	}
</style>
